<template>
  <div :class="className" :style="{height:height,width:width}" />

</template>

<script>
  import echarts from 'echarts'
  require('echarts/theme/macarons') // echarts theme
  export default {
    // mixins: [resize],
    props: {
      className: {
        type: String,
        default: 'chart',

      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '100%'
      },
      pieData:{
        type: String,
        value: ''
      },
      chuzhang:{
        type: String,
        value: ''
      },
    },

    data() {
      return {
        chart: null,
        option: {},
        shuzuData:50
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })

    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    created() {


      this.shuzuData = this.pieData
      this.option = {
        tooltip: {
          formatter: '{a} <br/>{b} : {c}%',
        },
        series: [
          {
            name: '测试',
            type: 'gauge',
            detail: {formatter: '{value}%'},
            data: [{value: this.shuzuData, name: ''}],
          },
        ]
      }
      // this.initChart()
    },
    methods: {
      initChart() {
        var that = this
        that.chart = echarts.init(this.$el, 'macarons')
        that.chart.setOption(that.option)
        // setInterval(function () {
        //   that.option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
        //   that.chart.setOption(that.option, true);
        // },2000);
      },

    }
  }
</script>
